body,
h1,
ul,
a,
img {
    margin: 0;
    padding: 0;
}

//最外层
#wrapper {

    //头部
    #header {

        //一级导航栏
        .headTop {
            height: 70px;
            background-color: #242424;

            //版心元素
            .headTopmain {
                width: 1125px;
                margin: 0 auto;
                line-height: 70px;
                overflow: hidden;

                //Logo
                .logo {
                    float: left;
                    height: 70px;

                    a {
                        float: left;
                        margin-right: 15px;

                        img {
                            float: left;
                            height: 39px;
                            width: 39px;
                            padding-top: 17px;
                        }

                        h1 {
                            float: left;
                            text-decoration: none;
                            text-align: center;
                            font-size: 23px;
                            color: white;
                            font-weight: 500;
                            filter: blur(0.5px);
                            margin-left: 5px;
                            letter-spacing: 1px;
                        }

                    }
                }

                //选项
                .option {
                    font-size: 0px;
                    float: left;
                    height: 100%;
                    position: relative;

                    a {
                        float: left;
                        font-size: 14px;
                        height: 100%;
                        text-decoration: none;
                        padding-left: 19px;
                        padding-right: 19px;
                        text-align: center;
                        color: #cccccc;

                        &:first-child {
                            color: white;
                            background-color: black;

                        }

                        &:hover {
                            color: white;
                            background-color: black;

                        }

                        .arrow {
                            #arrow {
                                position: fixed;
                                margin-top: -14px;
                                margin-left: -11.5px;
                                width: 23px;
                            }

                        }
                    }

                }

                //搜索框
                .search {
                    width: 158px;
                    float: left;

                    //版心元素
                    .searchMain {
                        overflow: hidden;
                        font-size: 0px;
                        float: left;
                        width: 158px;

                        input {
                            margin-top: 21px;
                            border-radius: 32px;
                            box-sizing: border-box;
                            height: 32px;
                            width: 158px;
                            padding-left: 28px;
                            font-size: 12px;
                            outline: none;
                            box-shadow: none;
                            border: none;

                        }

                        img {
                            position: fixed;
                            margin-top: 28px;
                            margin-left: -150px;
                            height: 17px;
                            width: 17px;
                            pointer-events: none;
                            /* 防止图标影响输入框的点击事件 */
                        }
                    }

                }

                //创作者中心
                .creator {
                    float: left;
                    position: relative;

                    a {
                        float: left;
                        text-decoration: none;
                        width: 90px;
                        height: 32px;
                        margin: 19px 0 0 12px;
                        box-sizing: border-box;
                        padding-left: 16px;
                        border: 1px solid #4F4F4F;
                        background-position: 0 -140px;
                        line-height: 33px;
                        color: #ccc;
                        border-radius: 20px;
                        font-size: 12px;
                    }
                }

                //登录
                .login {
                    float: left;
                    height: 45px;
                    margin: -5px 0 0 18px;

                    a {
                        float: left;
                        display: block;
                        width: 28px;
                        margin-top: 7px;
                        height: 15px;
                        color: #787878;
                        text-decoration: none;
                        outline: none;
                        font-size: 12px;
                    }
                }
            }

        }

        //二级导航栏
        .headBottom {
            height: 35px;
            background-color: #C20C0C;
            border-bottom: 1px solid #a40011;
            box-sizing: border-box;
            overflow: hidden;

            .headBottomMain {
                width: 1100px;
                margin: 0 auto;
                height: 34px;
                overflow: hidden;

                .headBottomOption {
                    overflow: hidden;

                    ul {
                        float: left;
                        padding-left: 173px;

                        a {
                            text-decoration: none;
                            color: #fff;
                            height: 34px;
                            text-align: center;
                            display: inline-block;
                            height: 20px;
                            padding: 0 13px;
                            margin: 7px 17px 0;
                            border-radius: 20px;
                            line-height: 21px;
                            font-size: 11px;

                            &:first-child {
                                background: #9B0909;
                            }

                            &:hover {
                                background: #9B0909;
                            }
                        }
                    }
                }

            }
        }
    }
}

//推荐页内容
.recommend {

    //版心元素
    .recommendMain {

        //上边区域
        #recommendTop {
            display: block;
            height: 284px;
            position: relative;
            overflow: hidden; /* 确保超出部分被裁剪 */
            //版心元素
            .recommendTopMain {
                z-index: 2; /* 确保内容在模糊背景之上 */
                height:285px ;
                width: 100%;
                position: relative;
                .recommendTopCenter {
                    position: relative;
                    max-width: 982px;
                    height: 285px;
                    margin: 0 auto;
                    overflow: hidden;

                    //轮播图
                    .recommendTopBanner {
                        display: flex;
                        float: left;
                        transition: transform 0.5s ease-in-out;

                        img {
                            width: 730px;
                        }

                        .banner-item {
                            min-width: 120%;
                            transition: transform 0.5s ease-in-out;
                        }

                        //小点点
                    .dots{
                        text-align: center;
                        margin-bottom: 20px;
                        position:absolute;
                        bottom: -10px;
                        left: 350px;
                        .dot{
                            cursor: pointer;
                            height: 6px;
                            width: 6px;
                            margin: 0 2.5px;
                            background-color: #a4a4a4;
                            border-radius: 50%;
                            display: inline-block;
                            transition: background-color 0.6s ease;
                            &.active,&:hover{
                                background-color: red;
                            }
                        }
                    }
                    }

                    

                    //下载区域
                    .recommendTopDownload {
                        float: right;
                        display: flex;
                        img{
                            height: 285px;
                            margin-top: -289px;
                        }
                    }
                    
                }
                
                //推荐大图的左右切换开始
                .slide {
                    display: block;
                    position:absolute;
                    top: 50%;
                    width: 37px;
                    height: 63px;
                    background: none;
                    margin-top:-30px;
                    border: none;
                    
                    .text{
                        width: 37px;
                        height: 31.5px;
                        font-size: 40px;
                        font-weight: 100;
                        transform: scaleY(2);
                        color: #b2b1b1;
                        margin-top: -10px;
                    }
                }
                .prev{
                    left: 75px;
                }
                .next {
                    right: 70px;
                }

                .prev:hover,
                .next:hover {
                    background-color: rgba(141, 141, 141, 0.8);
                }
                //推荐大图的左右切换结束
            }

        }
        #recommendTop::before{
            content: "";
            position: absolute;
            top: -30px; /* 调整这些值以适应你的需求 */
            left: -30px;
            right: -30px;
            bottom: -30px;
            background-image: var(--bg-image, url(../image/Carousel.jpg));
            filter: blur(20px); /* 根据需要调整模糊程度 */
            z-index: 1;
        }

        //下边区域
        .recommendBottom {}
    }
}